<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>基本用法</title>
  </head>
  <body>
    <!--1.指定一个宽高都是100px 背景色 绿色的div-->
    <div style="height: 100px; width: 100px;background-color: green">我是一个块级标签</div>
    <div style="height: 100px; width: 100px;background-color: blue">我是一个块级标签</div>

    <!--2.行级元素测试  不会独占一行-->
    <span>AAAA</span><span>BBBB</span><span>CCCC</span>
    <hr>

    <!--浮动测试
        注意事项:  如果设置了浮动效果,则其它未设置浮动效果的div将会向左看齐,出现重叠的效果
     -->
    <div style="width: 100px;height: 100px; background-color: cadetblue;float: left"></div>
    <div style="width: 200px;height: 200px; background-color: yellow; float: right"></div>






  </body>
</html>